<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锚点跳转</title>
		<style type="text/css">
			html,body,div,a{padding: 0;border: 0;margin: 0;outline: 0;box-sizing: border-box;}
			html,body{height: 100%;}
			body > div{height: 100%;}
			#one{background-color: red;transition: .2s;}
			#two{background-color: blue;}
			#three{background-color: green;}
			#four{background-color: yellow;}
			#five{background-color: pink;}
			.nav{position:fixed;left:0;top:0;right:0;display:block;height: 50px;line-height:50px;background-color: #000;}
			.nav a{width: 20%;height:100%;text-align:center;float: left;}
		</style>
	</head>
	<body>
		<!--a标签的href写上定位的id名称，点击a标签，会自动跳转到对应的id元素-->
		<div class="nav">
			<a href="#one">第一个</a>
			<a href="#two">第二个</a>
			<a href="#three">第三个</a>
			<a href="#four">第四个</a>
			<a href="#five">第五个</a>
		</div>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<div id="four"></div>
		<div id="five"></div>
	</body>
</html>